<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
		<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="register" id="register">
			<div class="haomaTitle" id="hmtitle"> 
				<div class="haoma-inner" id="haoma-inner">注册帐号</div> 
			</div>
			<form action="" method="post" id="form">
				<label class="item" for="nick">昵称</label>
				<div id="nick_bg" class="bg_error"> 
					<input type="text" class="new_txt" id="nick" name="nick" tabindex="6" style="z-index:0" maxlength="24" autocomplete="off"><span class="error1 error"></span>
				</div>
				<br />
				<br />
				<label class="item" for="pwd">密码</label>
				<div id="nick_bg" class="bg_error"> 
					<input type="text" class="new_txt" id="pwd" name="pwd" tabindex="6" style="z-index:0" maxlength="24" autocomplete="off"><span class="error2 error"></span>
				</div>
				<br />
				<br />
				<label class="item" for="repwd">确认密码</label>
				<div id="nick_bg" class="bg_error"> 
					<input type="text" class="new_txt" id="repwd" name="repwd" tabindex="6" style="z-index:0" maxlength="24" autocomplete="off"><span class="error3 error"></span>
				</div>
				<br />
				<br />
				<label class="item" >性别</label>
				<div id="nick_bg" class="nobg_error sex"> 
					<a name="男" id="sex_1" class="unchecked" tabindex="9">男</a>
					<a name="女" id="sex_2" class="checked" tabindex="10">女</a>
				</div>
				<br />
				<br />
				<label class="item" for="phone">手机</label>
				<div id="nick_bg" class="bg_error"> 
						<input type="phone" class="new_txt" id="phone" name="phone" tabindex="6" style="z-index:0" maxlength="24" autocomplete="off"><span class="error4 error"></span>
				</div>
				<br />
				<br />
				<label class="item" ></label>
				<input class="submit" type="button" value="立即注册"/>
			</form>
		</div>
	</body>
</html>
<script type="text/javascript">
	$('.sex a').on('click',function(){
		$(this).removeClass();
		$(this).addClass('checked');
		$(this).siblings().removeClass();
		$(this).siblings().addClass('unchecked');
	})
	
	
	$('.submit').on('click',function(){
		var user = $('#nick').val();
		var pwd = $('#pwd').val();
		var repwd = $('#repwd').val();
		var sex = $('.checked').text();
		var phone = $('#phone').val();
		if(ok==1){
			$.post('register_ac.php',{
				user:user,
				pwd:pwd,
				sex:sex,
				phone:phone
			},function(data){
				if(data=='ok'){
					window.location.href = 'login.html';
				}
				else{
					alert('出错了');
				}
			});
		}
		else{
			alert('粗错啦');
		}
	})
	
	checkNick();
	checkPwd();
	checkRePwd();
	checkPhone();
	var ok = 0;
	function checkNick(){
		$('#nick').on('blur',function(){
			if($(this).val()==''){
				$('.error1').text('用户名不能为空！');
				ok=0;
			}
			else{
				$('.error1').text('OK');
				ok=1;
			}
		})	
	}
	function checkPwd(){
		$('#pwd').on('blur',function(){
			if($(this).val().length<6){
				$('.error2').text('密码长度不能小于6！');
				ok=0;
			}
			else{
				$('.error2').text('OK');
				ok=1;
			}
		})	
	}
	function checkRePwd(){
		$('#repwd').on('blur',function(){
			if($(this).val()==$('#pwd').val()){
				$('.error3').text('OK');
				ok=1;
			}
			else{
				$('.error3').text('两次密码不同！');
				ok=0;
			}
		})	
	}
	function checkPhone(){
		$('#phone').on('blur',function(){
			if($(this).val()>8){
				$('.error4').text('OK');
				ok=1;
			}
			else{
				$('.error4').text('长度不能小于8');
				ok=0;
			}
		})	
	}
</script>

